<template>
    <div class='main'>            
        <div class="cover_c">  
            <div class="cover">
                <img src="https://xxx.oss.com/dxdh/%E8%92%99%E7%89%88%E7%BB%84%201.png"  alt="" style="width:100%;height:100%">
            </div>
        </div>
        <div class="content" v-if="display" id="selectform">

            <div class="title">
                <div>填报准备</div>
            </div>
            

            <div class="middle">
                <div class="blue"></div>
                <div class="subtitle">一、我的“职业意向”</div>
            </div>
            <div class="explain">在本系统“职业测试”模块中，以大数据为支撑，以自己的兴趣、爱好、特长、理想等因素为依据，</div>
            <div class="explain">通过“职业兴趣”、“职业性格”、“职业价值观”三个方面的测试，对自己进行职业潜能评估，选择或填写“职业意向”表</div>
            <div class="form1">
                <el-form  :model="form" label-width="120px" style="width:500px;" size="medium" id="selectform">
                    <el-form-item label="职业岗位: ">
                        <el-select v-model="input.jobName" placeholder="请选择职业" style="width:100%" >
                            <el-option v-for="(item,index) in ProfessionalPost" :key="index" :label="item.jobName" :value="item.jobName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>

            <div class="middle">
                <div class="blue"></div>
                <div class="subtitle">二、我的“专业方向”</div>
            </div>
            <div class="explain">根据自己的“职业意向”表，选择或填写“专业方向”表</div>
            <div class="form">
                <el-form  :inline="true" label-width="160px" size="medium" id="selectform" >
                    <el-form-item label="专业方向: ">
                        <el-input v-model="input.proDirection" placeholder="请填写您的专业方向" class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="专业名称: ">
                        <el-input v-model="input.proName" placeholder="请填写您的专业名称" class="input"></el-input>
                    </el-form-item>
                </el-form>
            </div>


            <div class="middle">
                <div class="blue"></div>
                <div class="subtitle">三、我的“限选条件”</div>
            </div>
            <div class="form">
                <el-form :inline="true"  label-width="160px" size="medium" id="selectform">
                    <el-form-item label="院校性质: ">
                        <el-input v-model="input.schoolNature" placeholder="请输入" class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="地理位置: ">
                        <el-input v-model="input.schoolLocation" placeholder="请输入" class="input"></el-input>
                        <!-- <el-select v-model="input.schoolLocation" multiple placeholder="请选择">
                            <el-option
                                v-for="item in schoolLocation"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select> -->
                    </el-form-item>
                </el-form>
            </div>


            <div class="select">
                <el-button class="submit" type="primary" @click="jumpTo()">填写“关键信息”</el-button>
            </div>
        </div>
        <div class="content" v-if="!display">
            <div class="emergency"><div style="font-family:Noto Sans SC;font-size:24px">系统维护中</div></div>
        </div>
    </div>    
</template>

<script>

export default {
    data(){
        return{
            ProfessionalPost:[], //职业岗位单选
            input:{
                jobName:"",
                proDirection:"",
                proName:"",
                schoolNature:"",
                schoolLocation:"",
                username:"",
            },
            // schoolLocation:[],  //地理位置多选
            value:"",
            nextStep:"1",//1为添加信息 else为修改信息
            display:true
        }
    },
    methods:{
        //获取由后台传回来职业岗位数组 并且渲染其他页面数组
        Obtainintention() {
            let username=JSON.parse(sessionStorage.username)
            console.log(username)
                url:`${this.baseURL}/jobInfoContrller/getJobName`,
            this.$axios.post(`${this.baseURL}/jobInfoContrller/getJobName`).then(res=>{
                console.log(res.data.data)
                this.ProfessionalPost=res.data.data
            })

            // let schoolLocation = JSON.parse(sessionStorage.province);
            // for(var i=0; i<schoolLocation.length; i++){
            // schoolLocation[i].value = schoolLocation[i]['id'];
            // schoolLocation[i].label = schoolLocation[i]['provinceName'];
            // delete schoolLocation[i].id;
            // delete schoolLocation[i].provinceName;
            // }
            // this.schoolLocation = schoolLocation;
            // console.log(this.schoolLocation)

        },
        jumpTo(){
            //添加填报准备信息
            // if(this.nextStep == 1) {
                let username=JSON.parse(sessionStorage.username)
                this.input.username = username
                console.log(this.input);
                this.$axios
                    .post(`${this.baseURL}/proInfoController/insertMyProInfo`,{
                        id: '',//这里不需要管
                        username:username,
                        jobName:this.input.jobName,
                        proDirection:this.input.proDirection,
                        proName:this.input.proName,
                        schoolNature:this.input.schoolNature,
                        schoolLocation:this.input.schoolLocation,
                    })
                    .then(res=>{
                        sessionStorage.setItem('preparafrom',JSON.stringify(this.input))
                        this.$router.push('/informationfilling')  
                    })
        }
    },
    mounted(){
        this.Obtainintention()
        this.nextStep = JSON.parse(sessionStorage.preparafrom) //判断是新增信息还是修改信息
        console.log(this.nextStep)
        if(this.nextStep != 1) {    //不等于1是要修改信息，所以要把缓存里面的数据调出来渲染到页面上
            let preparafrom = this.nextStep
            this.input.jobName = preparafrom.jobName
            this.input.proDirection = preparafrom.proDirection
            this.input.proName = preparafrom.proName
            this.input.schoolNature = preparafrom.schoolNature
            this.input.schoolLocation = preparafrom.schoolLocation
        }

    }
}
</script>

<style scoped>
.main{
    position: relative;
}
.content{
    width: 1440px;
    min-height: 804px;
    background-color: #fff;
    margin: 100px auto;
    /* position: relative; */ 
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}
.title{
    width: 100%;
    height: 270px;
    font-size: 40px;
    font-family: Noto Sans SC;
    /* line-height: 71px; */
    color: #000000;
    /* margin: 0 auto; */
    font-weight: 700;
    /* margin-top: 80px; */
    letter-spacing: 2px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.middle{
    display: flex;
    flex-direction: row;
}
.blue{
    width: 8px;
    height: 40px;
    background: #33AAFF;
    margin-left: 68px;
}
.subtitle{
    /* width: 256px; */
    /* height: 32px; */
    font-size: 32px;
    font-family: Noto Sans SC;
    font-weight: 500;
    line-height: 43px;
    color: #000000;
    margin-left: 10px;
    letter-spacing: 1px;
}
.form{
    width: 1200px;
    min-height: 125px;
    margin: 0 auto;
    margin-top: 55px;
    display: flex;
    flex-direction: row;
    flex: 1;
}
.form1{
    width: 1100px;
    min-height: 100px;
    /* background-color: aqua; */
    margin: 0 auto;
    margin-top: 55px;
    display: flex;
    flex-direction: row;
    flex: 1;
}
#selectform>>>.el-form-item__label {
    font-size: 23px;
    font-family: Noto Sans SC;
    color: #333333;
    line-height: 45px;
}
#selectform>>>.el-input__inner{
    border: 1px solid rgba(51, 170, 255, 1);
    border-radius: 8px;
    height: 100%;
    font-family: Noto Sans SC;
}
#selectform>>>.el-input{
    width: 325px;
    height: 45px;
}
.submit{
    width: 347px;
    height: 62px;
    /* background: #33AAFF; */
    opacity: 1;
    border-radius: 10px;
    font-size: 22px;
    font-family: Noto Sans SC;
    font-weight: 300;
    line-height: 41px;
    color: #FFFFFF;
    /* letter-spacing: 39px; */
}
.explain{
    font-size: 18px;
    font-family: Noto Sans SC;
    font-weight: 400;
    line-height: 25px;
    color: rgba(0, 0, 0, 0.45);
    /* width: 720px; */
    height: 18px;
    margin-left: 87px;
    margin-top: 18px;
    text-align: left;
}
.explain2{
    font-size: 15px;
    font-family: Noto Sans SC;
    font-weight: 400;
    line-height: 25px;
    color: rgba(0, 0, 0, 0.45);
    /* width: 720px; */
    height: 18px;
    margin-left: 10px;
    margin-top: 18px;
    text-align: left;
}
.input{
    width: 400.11px;
    float: left;
}
.cover{
    position: absolute;
    top: -210px;
    z-index: 0;
    /* width: 100%; */
    height: 276px;
    /* text-align: center; */
    left: 50%;
    margin-left: -960px; 
    overflow: hidden;
}
.cover_c{
    position: relative;
    width: 100%;
}
.emergency{
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}
.select{
    width: 750px;
    margin: 0 auto;
    margin-top:60px;
    /* margin-bottom: 70px; */
    height: 150px;
}
.select .buttonleft{
    width: 347px;
    height: 62px;
    color: rgba(51, 170, 255, 1);
    float: left;
    font-size: 24px;
    font-family: Source Han Sans;
    font-weight: 100;
    line-height: 41px;
    border: 2px solid #33AAFF;
    border-radius: 10px;
}
.select .buttonright{
    width: 347px;
    height: 62px;
    float: right;
    font-size: 24px;
    font-family: Source Han Sans;
    font-weight: 100;
    line-height: 41px;
    border-radius: 10px;
}
</style>